@let empty = !(dataProvider.currentPageCount$ | async) && !(dataProvider.isLoading$ | async);

<ix-page-header>
  <ix-search-input1
    [value]="filterString"
    [disabled]="empty"
    (search)="onListFiltered($event)"
  ></ix-search-input1>

  <button mat-button ixTest="snapshots" [routerLink]="['/datasets', 'snapshots']">
    {{ 'Snapshots' | translate }}
  </button>

  <ix-table-columns-selector
    [columnPreferencesKey]="'snapshotTaskList'"
    [columns]="columns"
    (columnsChange)="columnsChange($event)"
  ></ix-table-columns-selector>

  <button
    *ixRequiresRoles="requiredRoles"
    mat-button
    ixTest="add-task"
    color="primary"
    [ixUiSearch]="searchableElements.elements.add"
    (click)="doAdd()"
  >
    {{ 'Add' | translate }}
  </button>
</ix-page-header>

<div class="table-container">
  @if (empty) {
    <ix-empty [conf]="emptyConfig"></ix-empty>
  } @else {
    <ix-table
      class="table"
      [ixUiSearch]="searchableElements.elements.tasks"
      [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
      [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
    >
      <thead
        ix-table-head
        [columns]="columns"
        [dataProvider]="dataProvider"
      ></thead>
      <tbody
        ix-table-body
        [columns]="columns"
        [dataProvider]="dataProvider"
        [isLoading]="!!(dataProvider.isLoading$ | async)"
      >
        <ng-template let-task ix-table-details-row [dataProvider]="dataProvider">
          <ix-table-details-row [hiddenColumns]="hiddenColumns" [row]="task">
            <div class="table-details-row-actions">
              <button
                mat-button
                [ixTest]="[task.dataset, task.naming_schema, 'edit']"
                (click)="doEdit(task)"
              >
                <ix-icon name="edit"></ix-icon>
                <span>{{ 'Edit' | translate }}</span>
              </button>
              <button
                *ixRequiresRoles="requiredRoles"
                mat-button
                [ixTest]="[task.dataset, task.naming_schema, 'delete']"
                (click)="doDelete(task)"
              >
                <ix-icon name="mdi-delete"></ix-icon>
                <span>{{ 'Delete' | translate }}</span>
              </button>
            </div>
          </ix-table-details-row>
        </ng-template>
      </tbody>
    </ix-table>

    <ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
  }
</div>
